<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element元素对象</title>
</head>
<body>
<div></div>
<input type="text">
<select>
    <option></option>
    <option>机器视觉</option>
    <option>自动化</option>
    <option>人工智能</option>
</select>

<script>
    var div=document.getElementsByTagName("div")[0];
    div.style.height="200px";
    div.style.width="200px";
    div.style.border="2px solid red";
    //插入html元素
    div.innerHTML="<a href='https://www.baidu.com'>百度一下</a>";
    //插入纯文本信息(双标签中的文本内容)
    div.innerText="我是div元素";
    //获取body中的input标签
    var input=document.getElementsByTagName("input")[0];
    //设置input标签的尺寸(宽度)
    input.size=20;
    //给input标签中插入文本内容(单标签中的文本内容通过单标签value插入)
    input.value="我是一个输入框";
    var select = document.getElementsByTagName("select")[0];
    select.id="select";
    select.className="peoClass";

    // select.name="pro"  属性节点第一种方法
    //给标签设置属性 属性值
    select.setAttribute("name","pro2");//创建属性节点第二种方式
    //获取页面中的option选项标签
    var option = document.getElementsByTagName("option");
    option[0].innerText="java 大数据";
    option[0].value="java bigdata";
    //第四个option默认选中
    // option[3].selected="selected";
    option[3].selected=true;

</script>
</body>
</html>